<template>
  <div>
    <a-form-model ref="form" :model="form" v-bind="layout">
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="项目状态" prop="projectTitle">
            <span>{{ detail && statusMap[detail.status] }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="12" v-if="detail.status == '4'">
          <a-form-model-item label="终止原因" prop="projectNum">
            <span>{{ detail.terminationReason }}</span>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="距离报价截至时间" prop="projectNum">
            <a-statistic-countdown
              :valueStyle="{ 'font-size': '14px', 'font-family': 'PingFang-SC, Avenir, Helvetica, Arial, sans-serif', 'margin-top': '8px' }"
              :value="detail.quotationDeadlineStr" format="D 天 H 时 m 分 s 秒" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <a-card title="参与报价供应商" v-if="isShow">
      <a-table class="MT10" :pagination="false" :scroll="{ x: 1200 }" :columns="columns"
        :dataSource="quotationSupplierList">
        <div slot="operation" slot-scope="text,record">
          <a-button type="link" class="link-btn" @click="geiHisList(record)">查看记录</a-button>

        </div>
      </a-table>

    </a-card>
    <a-card class="MT10" title="报价趋势分析"  v-if="isShow">
      <div id="echartSupplier" style="width: 100%;height: 400px;background: #fff;"></div>
    </a-card>
    <a-modal :visible="show" title="报价记录" @cancel="handleCancel" :footer="null" centered width="80%">
      <div v-for="(item, index) in quotationHisList" :key="index" class="MT10">
        第 {{+quotationHisList.length - (index) }} 轮报价：报价时间：{{ item.createTime }}
        <span style="margin-left: 20px;">本次报价总额（含税）</span>
        <span style="color: red;">￥{{ item.currentQuotation | money }}</span>
        <a-table class="MT10" :pagination="false" :scroll="{ x: 1200 }" :columns="qutationColumns"
          :dataSource="item.targetVOList">

        </a-table>
      </div>
    </a-modal>

  </div>
</template>

<script>
import storage from '@/utils/storage'
import moment from 'moment'

import { getSourcingQuotationInfo, querySourcingQuotationHisVO } from "@/api/sourcing/index.js";
const statusMap = {
  1: '草稿',
  2: '报价中',
  3: '已完成',
  4: '已终止',
  5: '全部',
}

export default {
  components: {
  },

  data() {
    return {
      layout: {
        labelCol: { span: 7 },
        wrapperCol: { span: 17 },
      },
      statusMap,
      detail: {},
      id: '',
      quotationSupplierList: [],
      columns: [
        {
          title: "序号",
          width: 60,
          align: "center",
          customRender: (value, row, index) => `${index + 1}`,
        },
        {
          title: "供应商名称",
          dataIndex: "supplierName",
          ellipsis: true,
          width: 100
        },
        {
          title: "当前报价（含税）",
          ellipsis: true,
          customRender: text => '￥' + text,
          dataIndex: "currentQuotation",
          width: 100

        },
        {
          title: "报价有效期",
          dataIndex: "validityTime",
          width: 150,
          ellipsis: true
        },
        {
          title: "较上一轮降幅",
          dataIndex: "decrease",
          customRender: text => '￥' + text,

          ellipsis: true,
          width: 100
        },
        {
          title: "优惠率",
          dataIndex: "discounted",
          customRender: text => text + '%',

          width: 100
        },
        {
          title: "报价次数",
          dataIndex: "frequency",
          width: 100
        },
        {
          title: "报价记录",
          dataIndex: "operation",
          scopedSlots: { customRender: 'operation' },
          width: 100,
          fixed: 'right',

        },

      ],
      quotationHisList: [],
      show: false,
      qutationColumns: [
        {
          title: "序号",
          width: 60,
          align: "center",
          customRender: (value, row, index) => `${index + 1}`,
        },
        {
          title: "标的名称",
          dataIndex: "goodsName",
          ellipsis: true,
          width: 100
        },
        {
          title: "采购数量",
          ellipsis: true,
          dataIndex: "num",
          width: 100

        },
        {
          title: "计量单位",
          dataIndex: "unit",
          width: 100,
          ellipsis: true
        },
        {
          title: "品牌",
          dataIndex: "brandName",
          ellipsis: true,
          width: 100
        },
        {
          title: "型号",
          dataIndex: "model",

          width: 100
        },
        {
          title: "税率",
          dataIndex: "taxRate",
          customRender: text => text + '%',
          width: 100
        },
        {
          title: "单价（含税）",
          dataIndex: "price",
          customRender: text => '￥' + text,

          width: 140
        },
        {
          title: "单价（不含税）",
          dataIndex: "notTaxPrice",
          customRender: text => '￥' + text,

          width: 140
        },
        {
          title: "税额",
          dataIndex: "taxAmount",

          width: 100
        },
        {
          title: "总价（含税）",
          dataIndex: "totalPrice",
          customRender: text => '￥' + text,

          width: 140
        },
        {
          title: "报价有效期",
          dataIndex: "validityTime",

          width: 140
        },
        {
          title: "本轮降幅",
          dataIndex: "decrease",
          customRender: text => text ? text + '元' : '~',

          width: 100
        },
      ],
      isShow:false
    }
  },
  mounted() {
    console.log(this.detail)
    this.id = this.$route.query.id
    this.getDetail()

  },
  methods: {
    draw(xAxis, yAxis, totalPrice) {
      var ticket = this.$echarts.init(document.getElementById('echartSupplier'))

      const newData = {
        xAxis: xAxis,
        yAxis: yAxis,
        yAxisName: `预算总额￥${totalPrice}`,
      }
      let legendData = [];
      let seriesData = [];
      let colorArr = ['#8E35FF', '#FFB933', '#44C558', '#2F8FFF'];
      legendData = newData.yAxis.map((item) => item.name);
      seriesData = newData.yAxis.map((item1, index1) => {
        return {
          name: item1.name,
          type: 'line',
          symbol: 'circle',
          symbolSize: 3,
          itemStyle: {
            color: colorArr[index1],
          },
          lineStyle: {
            width: 2,
          },
          data: item1.value, // 折线图的数据
        }
      })

      let option = {
        backgroundColor: '#fff',
        grid: {
          containLabel: true,
          bottom: '1%',
          top: '15%',
          left: '5%',
          right: '1%',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          top: '1%',
          right: '1%',
          data: legendData,
          itemGap: 10,
          textStyle: {
            fontSize: 14,
            color: '#000',
          },
        },
        xAxis: {
          triggerEvent: true,
          data: newData.xAxis || [],
          axisLabel: {
            interval: 0,
            show: true,
            fontSize: 14,
            color: '#000',
          },
          axisLine: {
            show: true,

          },

          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            name: newData.yAxisName,
            type: 'value',
            nameTextStyle: {
              color: '#000',
              fontSize: 14,
              padding: [0, 0, 0, 20],
            },
            splitNumber: 2,
            axisLabel: {
              show: true,
              fontSize: 14,
              color: '#000',
            },
            axisLine: {
              show: true,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#3E4A82',
              },
            },
          },
        ],
        dataZoom: [{
          type: 'slider',  //放大缩小x轴数值
          show: true, //开启
          start: 0, //初始化时，滑动条宽度开始标度
          end: 100 / (xAxis.length / 5), //初始化时，滑动条宽度结束标度
          height: 10,
          top: '96%'

        }],
        series: seriesData,
      };
      ticket.setOption(option);

    },
    handleCancel() {
      this.show = false
    },
    geiHisList(record) {
      querySourcingQuotationHisVO({
        sourcingId: this.detail.id,
        supplierId: record.supplierId
      }).then(res => {
        if (res.code == 0) {
          this.quotationHisList = res.data
          this.show = true
        }
      })
    },
    getDetail() {
      getSourcingQuotationInfo({ id: this.id }).then(res => {
        if (res.code == 0) {
          res.data.quotationDeadlineStr = moment(res.data.quotationDeadline).valueOf()
          if (res.data.status == '4') {
            res.data.quotationDeadlineStr = 0
          }
          this.detail = res.data
          this.quotationSupplierList = res.data.quotationSupplierList
          if (this.quotationSupplierList.length&&this.detail.status != '4') {
            let axisX = []
            let yAxis = []
            this.quotationSupplierList.forEach((item, index) => {
              let yAxisItem = { name: item.supplierName, value: [] }
              item.quotationSupplierTrendList.forEach((item2, index2) => {
                if (!axisX.some(item => item == item2.createTime)) {
                  axisX.push(item2.createTime)
                }
              })
            })
            // 日期排序
            axisX.sort(function (a, b) {
              var time1 = new Date(a).getTime();
              var time2 = new Date(b).getTime();
              return time1 - time2;
            });
            this.quotationSupplierList.forEach((item, index) => {
              let yAxisItem = { name: item.supplierName, value: new Array(axisX.length) }
              item.quotationSupplierTrendList.forEach((item2, index2) => {

                let index = axisX.findIndex(item => item == item2.createTime)
                yAxisItem.value[index] = item2.currentQuotation
              })
              yAxis.push(yAxisItem)

            })
            console.log(axisX, 'axisx', yAxis)
            this.isShow = true
            this.$nextTick(() => {
              this.draw(axisX, yAxis, this.detail.budgetAmount)

            })

          }
// 

        }
      })
    }
  },
  watch: {

  }
}
</script>

<style lang="scss" scoped>
/deep/ .ant-form-item {
  margin-bottom: 0;
}
</style>